<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3415111_yx3kl1epmuo.css">
</head>

<body>
    <!-- 顶部导航 -->
    <nav>
        <div id="nav">
            <ul class="nav-left">
                <li>客服热线：400-400-899</li>
                <li class="nav-user" style="display: none;">欢迎用户：<span class="user">hua</span></li>
            </ul>
            <ul class="nav-right">
                <li>
                    <a href="./register.html" target="_blank">免费注册<span class="iconfont icon-zhuce"></span></a>
                </li>
                <li>
                    <a href="./login.html" target="_blank">登录<span class="iconfont icon-denglu"></span></a>
                </li>
                <li>
                    <a href="#" target="_blank">我的心愿商品<span class="iconfont icon-aixin"></span></a>
                </li>
                <li>
                    <a href="./goodsCar.html" target="_blank">购物袋<span class="iconfont icon-24gl-bag"></span></a>
                </li>
                <li>
                    <a href="#" target="_blank">客户服务<span class="iconfont icon-bangzhuzhongxin"></span></a>
                </li>
                <li>
                    <button onclick="logOut()">退出登录</button>
                </li>
                <li>鲜花礼品网：国内鲜花领先品牌</li>
            </ul>
        </div>
    </nav>
    <!-- 搜索框 -->
    <header>
        <div class="head-search-logo">
            <div class="head-logo">
                <img src="../images/logo.png" alt="">
            </div>
            <div class="head-search">
                <span class="iconfont icon-sousuo"></span>
                <input type="search" placeholder="商品搜索">
                <span><button>搜索</button></span>
            </div>
            <ul class="head-adv">
                <li><span class="iconfont icon-xiaohuoche"></span>全国配送</li>
                <li><span class="iconfont icon-meiguihua-copy-copy"></span>代写贺卡</li>
            </ul>
        </div>
    </header>
    <script>
        // 显示登录的用户名
        var username = localStorage.getItem('username');
        document.querySelector('.user').innerText = username;
        // 退出登录
        function logOut() {
            if (confirm('您确定要退出登录吗？')) {
                localStorage.clear('id', 'token');
                window.parent.location.href = '../index.html';

            }
        }
        // 判断本地存储是否存在用户名，存在就把用户名显示出来
        if (username) {
            var user = document.querySelector('.nav-user');
            user.style.display = 'block';
        }
    </script>
</body>

</html>